<template>
  <common-edit-dialog
    title="业务系统管理"
    width="800px"
    :visible.sync="dialogShow"
    :isShowButton="false"
    @cancel="cancel"
  >
    <common-tabs v-model="activeName" @tab-click="changeTabs">
      <el-tab-pane label="未选择" name="unselected"></el-tab-pane>
      <el-tab-pane label="已选择" name="selected"></el-tab-pane>
    </common-tabs>

    <div class="tabs-content">
      <!-- 未选择 -->
      <div class="user-list" v-if="activeName === 'unselected'">
        <common-search @search="handleQuery" @reset="resetQuery">
          <el-form
            @submit.native.prevent
            :model="unSelectForm"
            ref="queryForm"
            :inline="true"
            label-width="95px"
          >
            <el-form-item label="业务系统名称">
              <common-input
                :verify="false"
                v-model="unSelectForm.appNameEnCode"
                clearable
                @enter="handleQuery"
              />
            </el-form-item>
          </el-form>
        </common-search>
        <div class="u-l-l-btn">
          <el-button
            type="primary"
            class="bind-bth"
            plain
            @click="handleBinding"
            data-test="user-add"
            :disabled="(unSelectIds && unSelectIds.length === 0) || btnDisabled"
          >
            <i class="iconfont icon-guanlianzichan"></i> 批量绑定
          </el-button>
        </div>

        <common-table
          class="selectTable"
          v-loading="unSelectLoading"
          ref="unSelectList"
          :data="unSelectedList"
          @selection-change="handleUnSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="业务系统名称"
            align="left"
            prop="orgName"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="状态"
            align="left"
            prop="interfaceSwitch"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.interfaceSwitch === 0"
                >启用
              </el-tag>
              <el-tag type="danger" v-else-if="scope.row.interfaceSwitch === 1"
                >停用
              </el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="域名" align="left" prop="serverDomain" />
          <el-table-column label="IP" prop="ip">
            <template slot-scope="scope">
              {{ scope.row.serverList[0].ip }}
            </template>
          </el-table-column>
          <el-table-column label="应用端口" prop="port">
            <template slot-scope="scope">
              {{ scope.row.serverList[0].port }}
            </template>
          </el-table-column> -->
          <el-table-column label="操作" align="left" width="50">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: #f56c6c"
                @click="handleBinding(scope.row)"
                >绑定</el-button
              >
            </template>
          </el-table-column>
        </common-table>
        <pagination
          slot="pagination"
          :total="unSelectTotal"
          :page.sync="unSelectForm.pageNum"
          :limit.sync="unSelectForm.pageSize"
          @pagination="getUnSelectedList"
        />
      </div>

      <!-- 已选择 -->
      <div class="user-list" v-else>
        <common-search @search="handleQuery" @reset="resetQuery">
          <el-form
            @submit.native.prevent
            :model="selectForm"
            ref="queryForm"
            v-show="true"
            :inline="true"
            label-width="95px"
          >
            <el-form-item label="业务系统名称">
              <common-input
                v-model="selectForm.appNameEnCode"
                clearable
                :verify="false"
                @enter="handleQuery"
              />
            </el-form-item>
          </el-form>
        </common-search>
        <div class="u-l-l-btn" slot="content">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            @click="deleteUser"
            data-test="user-add"
            :disabled="(selectIds && selectIds.length === 0) || btnDisabled"
            >批量解绑
          </el-button>
        </div>
        <div class="u-l-l" v-loading="selectLoading">
          <common-table
            class="selectTable"
            ref="userList"
            :data="selectedList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="业务系统名称"
              align="left"
              prop="appName"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="状态"
              align="left"
              prop="interfaceSwitch"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.interfaceSwitch === 0"
                  >启用
                </el-tag>
                <el-tag
                  type="danger"
                  v-else-if="scope.row.interfaceSwitch === 1"
                  >停用
                </el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column label="域名" align="left" prop="serverDomain" />
            <el-table-column label="IP" prop="ip">
              <template slot-scope="scope">
                {{ scope.row.serverList[0].ip }}
              </template>
            </el-table-column>
            <el-table-column label="应用端口" prop="port">
              <template slot-scope="scope">
                {{ scope.row.serverList[0].port }}
              </template>
            </el-table-column> -->
            <el-table-column label="操作" align="left" width="50">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: #f56c6c"
                  @click="deleteUser(scope.row)"
                  >解绑</el-button
                >
              </template>
            </el-table-column>
          </common-table>
        </div>
        <pagination
          slot="pagination"
          :total="selectTotal"
          :page.sync="selectForm.pageNum"
          :limit.sync="selectForm.pageSize"
          @pagination="getSelectedList"
        />
      </div>
    </div>

    <el-button slot="footer-button" @click="cancel">关 闭</el-button>
  </common-edit-dialog>
</template>

<script>
import {
  queryListByParentId,
  selectUnbingdedApp,
  addApp,
  unbundedApp,
} from "@/api/apisecurity/applicationType/applicationType";
import BaseList from "@/mixins/BaseList";
import { decode, encode } from "@/utils/aesUtils";

export default {
  name: "index",
  mixins: [BaseList],
  props: {},
  data() {
    return {
      dialogShow: false,
      activeName: "unselected",
      id: "",
      parentId: "",
      // title: '',

      unSelectedList: [],
      unSelectLoading: false,
      unSelectForm: {
        pageNum: 1,
        pageSize: 10,
        appName: null,
        appNameEnCode: null,
      },
      unSelectTotal: 0,
      unSelectIds: [],
      btnDisabled: false,

      selectedList: [],
      selectLoading: false,
      selectForm: {
        pageNum: 1,
        pageSize: 10,
        appName: null,
        appNameEnCode: null,
      },
      selectTotal: 0,
      selectIds: [],

      key: "appId",

      // ids: [],
      // isRequest: false,
    };
  },
  methods: {
    cancel() {
      this.resetData();
      // this.resetSelect()
      this.dialogShow = false;
      this.$emit("refresh");
    },

    resetData() {
      this.unSelectedList = [];
      this.unSelectForm = {
        pageNum: 1,
        pageSize: 10,
        appName: null,
        appNameEnCode: null,
      };
      this.unSelectTotal = 0;
      this.unSelectIds = [];

      this.selectedList = [];
      this.selectForm = {
        pageNum: 1,
        pageSize: 10,
        appName: null,
        appNameEnCode: null,
      };
      this.selectTotal = 0;
      this.selectIds = [];

      this.activeName = "unselected";
    },

    resetSelect() {
      this.selectedList = [];
      this.selectForm = {
        pageNum: 1,
        pageSize: 10,
        appName: null,
      };
      this.selectTotal = 0;
      this.selectIds = [];
    },

    changeTabs() {
      this.unSelectIds = [];
      this.selectIds = [];
      if (this.activeName === "unselected") {
        this.getUnSelectedList();
      } else {
        this.getSelectedList();
      }
    },
    show(id) {
      this.dialogShow = true;
      this.parentId = id;
      this.getSelectedList();
      this.getUnSelectedList();
    },
    /**
     * 所有人员筛选
     */
    handleQuery() {
      if (this.activeName === "unselected") {
        this.unSelectForm.pageNum = 1;
        this.unSelectForm.appName = this.unSelectForm.appNameEnCode
          ? encode(this.unSelectForm.appNameEnCode)
          : null;
        this.getUnSelectedList();
      } else {
        this.selectForm.pageNum = 1;
        this.selectForm.appName = this.selectForm.appNameEnCode
          ? encode(this.selectForm.appNameEnCode)
          : null;
        this.getSelectedList();
      }
    },

    resetQuery() {
      if (this.activeName === "unselected") {
        this.unSelectForm = {
          pageNum: 1,
          pageSize: 10,
          appName: null,
        };
      } else {
        this.selectForm = {
          pageNum: 1,
          pageSize: 10,
          appName: null,
        };
      }
    },

    handleUnSelectionChange(selection) {
      this.unSelectIds = selection.map((item) => item.orgId);
    },

    handleSelectionChange(selection) {
      this.selectIds = selection.map((item) => item.orgId);
    },

    /**
     * 解绑
     * @param row
     */
    deleteUser(row) {
      let params = {
        appIdList: row.orgId ? [row.orgId] : this.selectIds,
      };
      this.btnDisabled = true;
      unbundedApp(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.$GlobalSuccessMessage("解绑成功");
            if (
              this.selectForm.pageNum > 1 &&
              this.selectIds.length === this.selectedList.length
            ) {
              this.selectForm.pageNum -= 1;
            }
            this.selectIds = [];
            this.getSelectedList();
          } else {
            this.handleListTips(res);
          }
        })
        .catch()
        .finally(() => (this.btnDisabled = false));
    },

    /**
     * 绑定
     * @param {} row
     */
    handleBinding(row) {
      let params = {
        parentId: this.parentId,
        appIdList: row.orgId ? [row.orgId] : this.unSelectIds,
        isDefault: "0",
      };
      this.btnDisabled = true;
      addApp(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.$GlobalSuccessMessage("绑定成功");
            if (
              this.unSelectForm.pageNum > 1 &&
              this.unSelectIds.length === this.unSelectedList.length
            ) {
              this.unSelectForm.pageNum -= 1;
            }
            this.unSelectIds = [];
            this.getUnSelectedList();
          } else {
            this.handleListTips(res);
          }
        })
        .catch()
        .finally(() => (this.btnDisabled = false));
    },

    /**
     * 获取已选列表
     */
    getSelectedList() {
      this.selectLoading = true;
      let params = {
        orgId: this.parentId,
        ...this.selectForm,
      };
      queryListByParentId(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.selectedList = res.rows;
            this.selectTotal = res.total;
          } else {
            this.selectedList = [];
            this.selectTotal = 0;
            this.handleListTips(res);
          }
        })
        .catch(() => {
          this.selectTotal = 0;
          this.selectedList = [];
        })
        .finally(() => (this.selectLoading = false));
    },
    /**
     * 获取未选列表
     */
    getUnSelectedList() {
      this.unSelectLoading = true;
      let params = {
        orgId: this.parentId,
        ...this.unSelectForm,
      };
      selectUnbingdedApp(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.unSelectedList = res.rows;
            this.unSelectTotal = res.total;
          } else {
            this.unSelectedList = [];
            this.unSelectTotal = 0;
            this.handleListTips(res);
          }
        })
        .catch(() => {
          this.unSelectTotal = 0;
          this.unSelectedList = [];
        })
        .finally(() => (this.unSelectLoading = false));
    },
  },
  mounted() {
    // this.getDeptSelect()
  },
};
</script>

<style scoped lang="scss">
::v-deep .global-common-info-dialog-body {
  padding: 0 18px;
}

.tabs-content {
  margin-top: 20px;
}

.selectTable {
  height: 280px !important;
}

::v-deep .bind-bth {
  span {
    display: flex;
    align-items: center;
  }

  .icon-guanlianzichan {
    display: inline-block;
    margin-right: 5px;
    font-size: 12px;
  }
}
</style>
